<template>
  <Head>
    <Title>Gallery</Title>
  </Head>
  <PageHeader
    title="Gallery"
    subtitle="Gallery"
    :image="`${$config.public.baseUrl}images/bg/home1/4.png`"/>
  <section
    class="gallery padding-bottom padding-top"
    data-aos="fade-up"
    data-aos-duration="800"
  >
    <div class="container">
      <div class="section-header text-center">
        <h2 class="style2-h2 style2-h2--defult">Our Gallery</h2>
      </div>
      <div class="gallery__wrapper">
        <div class="row g-4">
          <div class="col-md-4">
            <div class="row g-4">
              <div class="col-md-12">
                <div class="gallery__item">
                  <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/1.png`]">
                    <template v-slot:button>
                      <a href="javascript:void(0);">
                        <img
                          src="/images/gallery/home4/1.png"
                          alt="gallery image"
                        />
                      </a>
                      <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                    </template>
                  </FsLightboxModal>
                </div>
              </div>
              <div class="col-md-12">
                <div class="gallery__item">
                  <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/2.png`]">
                    <template v-slot:button>
                      <a href="javascript:void(0);">
                        <img
                      src="/images/gallery/home4/2.png"
                      alt="gallery image"
                    />
                      </a>
                      <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                    </template>
                  </FsLightboxModal>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="row g-4">
              <div class="col-md-12">
                <div class="gallery__item">
                  <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/4.png`]">
                    <template v-slot:button>
                      <a href="javascript:void(0);">
                        <img
                      src="/images/gallery/home4/4.png"
                      alt="gallery image"
                    />
                      </a>
                      <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                    </template>
                  </FsLightboxModal>
                </div>
              </div>
              <div class="col-md-12">
                <div class="gallery__item">
                  <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/5.png`]">
                    <template v-slot:button>
                      <a href="javascript:void(0);">
                        <img
                      src="/images/gallery/home4/5.png"
                      alt="gallery image"
                    />
                      </a>
                      <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                    </template>
                  </FsLightboxModal>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="gallery__item">
              
              <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/3.png`]">
                    <template v-slot:button>
                      <a href="javascript:void(0);">
                        <img
                          src="/images/gallery/home4/3.png"
                          alt="gallery image"
                        />
                      </a>
                      <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                    </template>
                  </FsLightboxModal>
            </div>
          </div>
          <div class="col-md-4">
            <div class="gallery__item">
              <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/3.png`]">
                    <template v-slot:button>
                      <a href="javascript:void(0);">
                        <img
                          src="/images/gallery/home4/3.png"
                          alt="gallery image"
                        />
                      </a>
                      <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                    </template>
                  </FsLightboxModal>
            </div>
          </div>
          <div class="col-md-4">
            <div class="row g-4">
              <div class="col-md-12">
                <div class="gallery__item">
                  <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/1.png`]">
                    <template v-slot:button>
                      <a href="javascript:void(0);">
                        <img
                          src="/images/gallery/home4/1.png"
                          alt="gallery image"
                        />
                      </a>
                      <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                    </template>
                  </FsLightboxModal>
                </div>
              </div>
              <div class="col-md-12">
                <div class="gallery__item">
                  <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/2.png`]">
                    <template v-slot:button>
                      <a href="javascript:void(0);">
                        <img
                          src="/images/gallery/home4/2.png"
                          alt="gallery image"
                        />
                      </a>
                      <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                    </template>
                  </FsLightboxModal>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="row g-4">
              <div class="col-md-12">
                <div class="gallery__item">
                  <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/4.png`]">
                    <template v-slot:button>
                      <a href="javascript:void(0);">
                        <img
                          src="/images/gallery/home4/4.png"
                          alt="gallery image"
                        />
                      </a>
                      <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                    </template>
                  </FsLightboxModal>
                </div>
              </div>
              <div class="col-md-12">
                <div class="gallery__item">
                  <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/5.png`]">
                    <template v-slot:button>
                      <a href="javascript:void(0);">
                        <img
                          src="/images/gallery/home4/5.png"
                          alt="gallery image"
                        />
                      </a>
                      <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                    </template>
                  </FsLightboxModal>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- ===============>> Gallery section end here <<================= -->

  <!-- ===============>> newsletter start here <<================= -->
  <div class="newsletter" data-aos="fade-up" data-aos-duration="800">
    <div class="container">
      <NewsletterGellary />
    </div>
  </div>
</template>

<script>
import PageHeader from "@/components/partials/PageHeader.vue";
import NewsletterGellary from "@/components/partials/newsletters/NewsletterTwo.vue";
import FsLightboxModal from "@/components/base/modals/FsLightboxModal.vue";
export default {
  scrollToTop: true,
  components: { PageHeader, NewsletterGellary, FsLightboxModal },
};
</script>